<template>
  <div>
    <Title :title="title"></Title>
    <div ref="right2" class="chart-container"></div>
  </div>
</template>

<script setup>
import Title from './Title.vue';
import { ref, onMounted } from 'vue';
import { Area } from '@antv/g2plot';

const right2 = ref(null);
const title = ref('污染物排放量月度趋势堆积面积图'); // 调整标题

const loadAreaChart = () => {
  // 时间修改为1月至5月
  const data = [
    // 碳的氧化物数据
    { time: '1月', source: '碳的氧化物', value: 120 },
    { time: '2月', source: '碳的氧化物', value: 110 },
    { time: '3月', source: '碳的氧化物', value: 130 },
    { time: '4月', source: '碳的氧化物', value: 140 },
    { time: '5月', source: '碳的氧化物', value: 150 },
    
    // 含硫化合物数据
    { time: '1月', source: '含硫化合物', value: 80 },
    { time: '2月', source: '含硫化合物', value: 75 },
    { time: '3月', source: '含硫化合物', value: 85 },
    { time: '4月', source: '含硫化合物', value: 90 },
    { time: '5月', source: '含硫化合物', value: 95 },
    
    // 含氮化合物数据
    { time: '1月', source: '含氮化合物', value: 60 },
    { time: '2月', source: '含氮化合物', value: 55 },
    { time: '3月', source: '含氮化合物', value: 65 },
    { time: '4月', source: '含氮化合物', value: 70 },
    { time: '5月', source: '含氮化合物', value: 75 },
  ];

  // 颜色方案保持区分度
  const sourceColors = {
    '碳的氧化物': '#FF6B6B',    // 红色系
    '含硫化合物': '#FFD166',    // 黄色系
    '含氮化合物': '#3A86FF',    // 蓝色系
  };

  const areaPlot = new Area(right2.value, {
    data,
    xField: 'time',
    yField: 'value',
    seriesField: 'source',
    stack: true,
    color: ({ source }) => sourceColors[source] || '#ffcc66',
    opacity: 0.7,
    line: {
      visible: true,
      style: {
        stroke: 'white',
        lineWidth: 1.5,
      },
    },
    point: {
      visible: true,
      size: 4,
      style: {
        fill: 'white',
        stroke: ({ source }) => sourceColors[source] || '#ffcc66',
        lineWidth: 1.5,
      },
    },
    label: {
      visible: true,
      position: 'top',
      style: {
        fill: 'white',
        fontSize: 8,
        shadowBlur: 1,
        shadowColor: 'rgba(0,0,0,0.3)',
      },
    },
    xAxis: {
      label: {
        style: {
          fill: 'white',
          fontSize: 10,
          rotate: 0,    // 月份标签无需旋转
          margin: 10,   // 增加标签与轴的间距
        },
      },
      line: {
        style: {
          stroke: 'rgba(255, 255, 255, 0.2)',
        },
      },
    },
    yAxis: {
      min: 0,
      label: {
        style: {
          fill: 'white',
          fontSize: 8,
        },
      },
      title: {
        text: '排放量(吨)',
        style: {
          fill: 'white',
          fontSize: 10,
        },
      },
      grid: {
        visible: true,
        style: {
          stroke: 'rgba(255, 255, 255, 0.1)',
        },
      },
    },
    legend: {
      position: 'top-right',
      item: {
        label: {
          style: {
            fill: 'white',
            fontSize: 8,
          },
        },
      },
    },
    interactions: [
      { type: 'element-active' },
      { type: 'tooltip' },
    ],
  });

  areaPlot.render();
};

onMounted(() => {
  loadAreaChart();
});
</script>

<style lang="less" scoped>
.chart-container {
  height: 150px;
  width: 100%;
  position: relative;
  border-radius: 6px;
  background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
  overflow: hidden;
}
</style>